<template>
    <div class="conponent-textarea">
        <label :class="{focus:isFocus}">
            <textarea v-model="deplux" :placeholder="placeholder" @focus="focus()"
                      @blur="blur()" :style="style"></textarea>
        </label>
    </div>
</template>

<script type="text/babel">

    module.exports = {
        data: ()=>({
            isFocus: false,
            rHeight: 0
        }),
        props: {
            deplux: {
                coerce: function (deplux) {
                    return deplux || ''
                }
            },
            placeholder: {
                coerce: function (placeholder) {
                    return placeholder || ''
                }
            },
            height: {
                coerce: function (height) {
                    return height || 80
                }
            }
        },
        computed: {
            style: function () {
                this.rHeight = this.$el.children[0].children[0].scrollHeight;

                return {
                    height: (this.rHeight > this.height ? this.rHeight : this.height) + 'px',
                    deplux: this.deplux//为了和deplux建立关联
                }
            }
        },
        methods: {
            focus: function () {
                this.isFocus = true;
            },
            blur: function () {
                this.isFocus = false;
            }
        }
    }
</script>